<template>
    <div class="table-div">
        <!-- 表格头部面板 -->
        <div class="table-panel">
            <!-- 
                @keyup.native ---- 键盘松开事件
                @keyup.enter.native ---- 回车事件
             -->

            <el-input

                v-model="search.keyword"

                placeholder="关键字查询"
                class="filter-item"
                @keyup.enter.native="initTableData"
                @keyup.native="initTableData"
            />
        </div>
        <!-- 
            表格
            @row-click ---- 行点击事件
            @select-all ---- 全选事件
            @select ---- 选择事件
            :default-sort="{ prop: 'id', order: 'descending' }"
        -->
        <el-table
            ref="list"
            :data="tableData.list"
            style="width: 100%; margin-top: 10px"
            border
            stripe
            highlight-current-row
            @sort-change="changeSort"
        >
            <!-- 
                sortable ---- 未开启后台分页时使用
                sortable="custom" ---- 开启后台分页时使用，table 中用 sort-change 监听排序点击事件
            -->
            <el-table-column property="id" label="ID" width="120" align="center" sortable="custom"> </el-table-column>
            <el-table-column property="orderLandlordId" label="房东ID" width="100" align="center" sortable="custom"> </el-table-column>
             <el-table-column
                    label="订单状态"
                    width="180"
                    align="center">
                <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>创建时间: {{ scope.row.orderCreateTime }}</p>
                    <p>完成时间: {{ scope.row.orderDealTime  }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">
                            <span v-if="scope.row.orderDealTime == null">未完成</span>
                            <span v-else>已完成</span>
                        </el-tag>
                    </div>
                </el-popover>
                </template>
            </el-table-column>

            <el-table-column property="orderLeasingId" label="租房信息"  align="center" >
                <template slot-scope="scope">
                <el-button type="primary" @click="showLeasing(scope.row.orderLeasingId)">查看详情</el-button>
                <!-- <LeasingModal v-show="showModal" v-on:closeme="closeme"></LeasingModal> -->
               
               <!-- 租房详细信息 -->
               <el-dialog
                    title="租房信息"
                    :visible.sync="dialogVisible"
                     width="70%"
                    :before-close="handleClose">
                    <div class="table-div">
           
           <el-table
            ref="list"
            :data="tableDataforLeasing"
            style="width: 100%; margin-top: 10px"
            border
            stripe
            highlight-current-row
            @sort-change="changeSort"
        >

            <el-table-column property="id" label="租房编号" width="130" align="center" >
                <template scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column property="leasingDuration" label="租期(月)" width="130" align="center" >
            </el-table-column>
            <el-table-column property="leasingRent" label="租金(元)" width="130" align="center" > </el-table-column>
            <el-table-column property="leasingDeposit" label="押金(元)" width="130" align="center" ></el-table-column>
            <el-table-column property="leasingPayment" label="共支付(元)" width="130" align="center" ></el-table-column>
            <el-table-column property="name" label="小区" width="130" align="center" ></el-table-column>
            <el-table-column property="address" label="地址" width="130" align="center" ></el-table-column>
            <el-table-column property="type" label="类型" width="130" align="center" ></el-table-column>
        </el-table>

                    </div>
                
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
                </el-dialog>
                 </template>
                  
            </el-table-column>
            <el-table-column label="操作" width="130" align="center">
                <template slot-scope="scope">
                    <el-button type="success" v-if="scope.row.orderDealTime == null"  @click="payForThis(scope.row)">支付</el-button> 
                    <el-button type="success" v-else  disabled="true" >已支付</el-button>  
                </template>
            </el-table-column>
        </el-table>
        <!-- 
            分页
            :tableData ---- 将 tableData 作为参数传递给子组件 Pagination
            @emitPageData ---- 子组件 $emit 函数定义的 key
            receivePageData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
        -->
        <Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>
        <!-- 
            Model 编辑弹出窗
            :dialogData ---- 將 dialogData 作为参数传递给子组件 userEdit.vue
            @emitDialogData ---- 子组件 $emit 函数定义的 key
            receiveDialogData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
        -->
        <!-- <UserEdit :dialogData="dialogData" @emitDialogData="receiveDialogData"></UserEdit> -->
    </div>
</template>
    
<script>
import Pagination from "@/components/fragments/Pagination.vue"

export default {
  name: "orderinfo",
  components: {
    Pagination
  },
    data() {
    return {
        dialogVisible: false,
      tableData: {
        pageNum: 1,
        pageSize: 5,
        total: 40,
        list: {}, // 当前页数据集合
      },
            // 查询参数
           search: {
                currentPage: 1,
                pageSize: 5,
                keyword: "",
                sort: "id",
                direction: "desc",
                tenantId: this.$Storage.getItemForLs(this.$TestData.TOKEN_OBJECT_KEY).aud,
            },
            tableDataforLeasing:
               [
                   {
                   "id":"1218006",
                    "leasingDuration":3000,
                    "leasingRent":2000,
                    "leasingDeposit":2000,
                    "leasingPayment":10000,
                     "name":"云霄宝殿",
                     "address":"红星路12号",
                     "type":"三室一厅"
                    }
               ],
     }
  },
  methods: {
        // 初始化表格数据
        initTableData: function () {
            var self = this;
            $.ajax({
                url:"http://127.0.0.1:8000/api/rentorder/ordersByUser",
                type:"post",
                contentType:"application/json",
                data:JSON.stringify(self.search),
                success:function(rs){
                    self.tableData = rs;
                    //console.log("############"+ rs);
                },
                error:function() {
                    //TODO
                }
            });
        },
        // 列排序事件
        changeSort: function (obj){
            this.search.sort = this.$Common.camecaseToLine(obj.prop);
            this.search.direction = obj.order == "descending" ? "desc" : "asc";
            this.initTableData();
        },
        // 接收分页组件 $emit 函数传递的值
         receivePageData: function (tableData){
            this.search.currentPage = tableData.pageNum;
            this.search.pageSize = tableData.pageSize;
            this.initTableData();
         },
        // 接收编辑组件 $emit 函数传递的值
        receiveDialogData: function (showEditDialog){},
        // 新增模型
        addModel: function (){},
        // 修改模型
        editModel: function (row){},
        // 删除模型
                // 删除 model
        deleteModel: function (row) {
            this.$confirm("确定要删除当前行吗？", "删除", {
				comfirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					var url = "/api/rentorder/delete/" + row.id;
					this.$Request
						.fetch_(url, "delete", {})
						.then((result) => {
							if (result.status == this.$Request.OK_CODE) {
								this.$message({
									message: "删除成功",
									type: "success",
									duration: 2 * 1000,
								});
								this.search.currentPage = 1;
								this.initTableData();
							} else {
								this.$message.error(result.message);
							}
						})
						.catch(() => { });
				})
				.catch(() => { });
		},
        // 导出模型
        exportData: function () {},
        payForThis: function (row) {
            var self = this;
            $.ajax({
                url:"http://127.0.0.1:8000/api/rentorder/pay",
                type:"put",
                contentType:"application/json",
                data:JSON.stringify(row),
                success:function(rs){
                    this.initTableData();
                },
                error:function() {
                    //TODO
                }
            })
        },
        showLeasing: function(orderLeasingId){
            this.dialogVisible = true;
            var self = this;
            $.ajax({
                url:"http://127.0.0.1:8000/api/rentorder/leasing/"+orderLeasingId,
                type:"post",
                contentType:"application/json",
                //data:JSON,
                success:function(rs){
                    console.log("###########"+orderLeasingId);
                    self.tableDataforLeasing = rs;
                },
                error:function() {
                    //TODO
                }
            });
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    
  },
        mounted: function () {
        this.initTableData();
        },
};
</script>
    
<style scoped>
.table-div {
  margin-top: 10px;
}

.filter-item {
  float: left;
  width: 300px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  /* margin-right: 5px; */
}
</style>
   